<template>
  <div class="setShortCutKey">
    <el-form
      :model="form"
      size="small"
      label-width="150px"
      :hide-required-asterisk="true"
      :rules="rules"
      ref="form"
      class="shortCutKey-form"
    >
      <el-scrollbar class="wertc-scrollbar" wrap-class="wertc-scrollbar__wrap">
        <div class="formBroad">
          <div style="width:65%">
            <el-form-item label="操作类型" prop="password">
              <label style="color:white;margin-left:20%">快捷键</label>
            </el-form-item>
            <el-form-item label="呼叫" prop="password">
              <el-input
                ref="call"
                v-model="form.call"
                style="width:90%"
                @keyup.native="handleGetKey($event,'call')"
                @focus="handleGetCurData('call')"
              />
            </el-form-item>
            <el-form-item label="转接" prop="password">
              <el-input
                ref="transfer"
                v-model="form.transfer"
                style="width:90%"
                @keyup.native="handleGetKey($event,'transfer')"
                @focus="handleGetCurData('transfer')"
              />
            </el-form-item>
            <el-form-item label="咨询呼叫" prop="password">
              <el-input
                ref="consult"
                v-model="form.consult"
                style="width:90%"
                @keyup.native="handleGetKey($event,'consult')"
                @focus="handleGetCurData('consult')"
              />
            </el-form-item>
            <el-form-item label="挂机" prop="password">
              <el-input
                ref="turnOff"
                v-model="form.turnOff"
                style="width:90%"
                @keyup.native="handleGetKey($event,'turnOff')"
                @focus="handleGetCurData('turnOff')"
              />
            </el-form-item>
            <el-form-item label="应答" prop="password">
              <el-input
                ref="answer"
                v-model="form.answer"
                style="width:90%"
                @keyup.native="handleGetKey($event,'answer')"
                @focus="handleGetCurData('answer')"
              />
            </el-form-item>
            <el-form-item label="保持" prop="password">
              <el-input
                ref="hold"
                v-model="form.hold"
                style="width:90%"
                @keyup.native="handleGetKey($event,'hold')"
                @focus="handleGetCurData('hold')"
              />
            </el-form-item>
            <el-form-item label="解除保持" prop="password">
              <el-input
                ref="unHold"
                v-model="form.unHold"
                style="width:90%"
                @keyup.native="handleGetKey($event,'unHold')"
                @focus="handleGetCurData('unHold')"
              />
            </el-form-item>
            <el-form-item label="监听" prop="password">
              <el-input
                ref="monitor"
                v-model="form.monitor"
                style="width:90%"
                @keyup.native="handleGetKey($event,'monitor')"
                @focus="handleGetCurData('monitor')"
              />
            </el-form-item>
            <el-form-item label="强插" prop="password">
              <el-input
                ref="forceInsert"
                v-model="form.forceInsert"
                style="width:90%"
                @keyup.native="handleGetKey($event,'forceInsert')"
                @focus="handleGetCurData('forceInsert')"
              />
            </el-form-item>
            <el-form-item label="强拆" prop="password">
              <el-input
                ref="forceRelease"
                v-model="form.forceRelease"
                style="width:90%"
                @keyup.native="handleGetKey($event,'forceRelease')"
                @focus="handleGetCurData('forceRelease')"
              />
            </el-form-item>
            <el-form-item label="拨号" prop="password">
              <el-input
                ref="dial"
                v-model="form.dial"
                style="width:90%"
                @keyup.native="handleGetKey($event,'dial')"
                @focus="handleGetCurData('dial')"
              />
            </el-form-item>
            <el-form-item label="重拨" prop="password">
              <el-input
                ref="reCall"
                v-model="form.reCall"
                style="width:90%"
                @keyup.native="handleGetKey($event,'reCall')"
                @focus="handleGetCurData('reCall')"
              />
            </el-form-item>
          </div>
          <div style="width:35%">
            <div style="color:white;font-size:20px;margin-top:10%">Tips:</div>
            <div style="color:white">回退键(Backspace)删除快捷设置</div>
            <!-- <div style="color:white">取消键(Esc)取消当前选择</div> -->
            <div style="color:#ec5c5c">快捷键不能重复设置</div>
            <div style="color:#ec5c5c">不能和系统其他软件快捷键冲突</div>
            <!-- <div style="color:#ec5c5c">{{temData}}</div>
            <div style="color:#ec5c5c">{{form.call}}</div>-->
          </div>
        </div>
      </el-scrollbar>
    </el-form>
  </div>
</template>

<script>
import deepClone from '@/utils/clone'
export default {
  props: {},
  data() {
    return {
      form: {
        call: '*',
        transfer: '-',
        consult: 'Control+3',
        turnOff: 'Control+4',
        answer: 'Space',
        hold: 'Page Up',
        unHold: 'Page Down',
        monitor: 'Control+5',
        forceInsert: 'Insert',
        forceRelease: 'Delect',
        dial: 'Enter',
        reCall: 'Home',
      },
      rules: {},
      temData: '',
    }
  },
  methods: {
    handleGetCurData(ref) {
      this.temData = deepClone(this.$refs[ref].value)
    },
    //键盘事件
    handleGetKey(ev, ref) {
      if (ev.code == 'Backspace') {
        this.temData = ''
        this.form[ref] = ''
        return
      }
      // if (ev.code == 'Escape') {
      //   this.$refs[ref].focused = false
      //   return
      // }
      let temData = this.temData
      if (temData) {
        temData = temData + '+' + ev.code
      } else {
        temData = ev.code
      }
      this.form[ref] = temData
      this.temData = temData
    },

    // 保存
    handleSubmit() {
      let _this = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          _this.$emit('close')
          if (_this.form.lockPassWord) {
            localStorage.setItem('lockPassWord', _this.form.lockPassWord)
          }
        }
      })
    },
  },
  mounted() {
    // 获取软电话
    this.form.lockPassWord = localStorage.getItem('lockPassWord')
  },
}
</script>

<style lang="scss" scoped>
.setShortCutKey {
  height: 100%;
  .wertc-scrollbar {
    height: 100%;
  }
  /deep/.wertc-scrollbar__wrap {
    width: auto;
    overflow-x: hidden;
    margin-right: -20px !important;
  }
  .shortCutKey-form {
    height: 100%;
    border: 1px solid white;
  }
  .el-form {
    .el-form-item {
      /deep/.el-form-item__label {
        color: #fff;
      }
      /deep/.el-input__inner {
        width: 100%;
        background-color: #1a4969;
        color: #fff;
      }
      /deep/.el-switch__label {
        color: #fff;
        &.is-active {
          color: #13ce66;
        }
      }
    }
  }
  .formBroad {
    width: 90%;
    display: flex;
  }
}
</style>